<template>
  <el-menu :collapse="collapse" :default-active="activeRoute" class="side-menu" background-color="#545c64"
    text-color="#fff" active-text-color="#ffd04b" unique-opened router>
    <el-submenu :index="index + ''" v-for="(menu,index) in menuConfig" :key="index">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span>{{menu.title}}</span>
      </template>
      <el-menu-item v-for="(submenu,subIndex) in menu.subs" :key="subIndex" :index="submenu.index">{{submenu.title}}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import bus from './bus'
import { menuConfig } from "@/config/menuConfig";
export default {
  data () {
    return {
      menuConfig,
      collapse: false
    };
  },
  computed: {
    activeRoute () {
      return this.$route.meta.path
    }
  },
  created () {
    this._initastrict()
    // console.log(this.$route)
    bus.$on('collapse', (collapse) => {
      this.collapse = collapse
    })
  }, methods: {
    _initastrict () {
      if(localStorage.getItem('roles') === 'admin'){
        const menuList = require('../../../config/menuConfig.json')
        this.menuConfig = menuList
      }
    }
  }
};
</script> 

<style lang="less">
.side-menu {
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
}
.side-menu:not(.el-menu--collapse) {
  width: 250px;
}
</style>